<template>
  <div class="h5-participants">
    <!-- 讲师 -->
    <div class="participant-item teacher">
      <div class="video-container">
        <video
          v-if="teacher.videoEnabled"
          ref="teacherVideo"
          autoplay
          playsinline
        ></video>
        <img v-else :src="teacher.teacherAvatar" :alt="teacher.teacherName" />
        <div class="device-status">
          <el-icon :class="{ 'is-off': !teacher.audioEnabled }">
            <Microphone v-if="teacher.audioEnabled" />
            <Mute v-else />
          </el-icon>
          <el-icon :class="{ 'is-off': !teacher.videoEnabled }">
            <VideoCamera v-if="teacher.videoEnabled" />
            <VideoPlay v-else />
          </el-icon>
        </div>
      </div>
      <div class="info">
        <div class="name-wrapper">
          <span class="name">{{ teacher.teacherName }}</span>
          <span class="role">主讲</span>
        </div>
      </div>
    </div>

    <!-- 学生列表 -->
    <div class="participant-item" v-for="student in students" :key="student.id">
      <div class="video-container">
        <video
          v-if="student.videoEnabled && student.hasCamera"
          :ref="'video-' + student.id"
          autoplay
          playsinline
        ></video>
        <img v-else :src="student.avatar" :alt="student.name" />
        <div class="device-status">
          <el-icon :class="{ 'is-off': !student.audioEnabled }">
            <Microphone v-if="student.audioEnabled" />
            <Mute v-else />
          </el-icon>
          <el-icon :class="{ 'is-off': !student.videoEnabled }">
            <VideoCamera v-if="student.videoEnabled" />
            <VideoPlay v-else />
          </el-icon>
        </div>
      </div>
      <div class="info">
        <div class="name-wrapper">
          <span class="name">{{ student.name }}</span>
          <div class="speaking-indicator" v-if="student.isSpeaking">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Microphone,
  Mute,
  VideoCamera,
  VideoPlay,
} from "@element-plus/icons-vue";

defineProps({
  teacher: Object,
  students: Array,
});
</script>

<style lang="scss" scoped>
.h5-participants {
  height: 100%;
  overflow-y: auto;
  padding: 12px 16px;
  background: #14152b;
  flex: 1;

  .participant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;

    &.teacher {
      background: rgba(64, 128, 255, 0.1);

      .role {
        color: #4080ff;
        font-size: 12px;
        background: rgba(64, 128, 255, 0.2);
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 8px;
      }
    }

    .video-container {
      width: 120px;
      height: 68px;
      border-radius: 8px;
      overflow: hidden;
      background: #000;
      position: relative;

      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .device-status {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 6px;
        padding: 4px 6px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;

        .el-icon {
          font-size: 16px;
          color: #4080ff;

          &.is-off {
            color: #ff4d4f;
          }
        }
      }
    }

    .info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;

        .name {
          font-size: 14px;
          font-weight: 500;
        }
      }

      .speaking-indicator {
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 16px;
        margin-left: 8px;

        span {
          width: 3px;
          height: 6px;
          background: #4080ff;
          border-radius: 1px;
          animation: wave 1s ease-in-out infinite;

          &:nth-child(2) {
            height: 10px;
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            height: 8px;
            animation-delay: 0.4s;
          }
        }
      }
    }
  }
}

@keyframes wave {
  0%,
  100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}
</style>
